<template>
  <div>
    <Loading v-if="visible" width="150" height="150"></Loading>
    <scale-container v-else :options="{ width: 3840, height: 2160 }">
      <div class="flex flex-column">
        <fly-box>
          <top-header></top-header>
        </fly-box>
        <div class="flex">
          <div class="left flex flex-column" style="height: 1990px">
            <fly-box>
              <!-- 用户总数 -->
              <user-total></user-total>
              <!-- 年龄分布 -->
              <age-distribution></age-distribution>
              <!-- 设备统计 -->
              <device-count></device-count>
              <!-- 男女分布 -->
              <total-gender></total-gender>
              <!-- 外卖骑手概况 -->
              <line-chart></line-chart>
              <!-- 当前热卖品类 -->
              <bar-chart></bar-chart>
            </fly-box>
          </div>

          <div class="flex-1">
            <center-header></center-header>
            <category
              :data="['ALL', '北京', '上海', '深圳', '杭州', '南京', '武汉']"
            ></category>
            <div class="flex">
              <div style="height: 1690px">
                <fly-box>
                  <earth></earth>
                  <category :data="['订单量', '销售量', '用户量', '退单量']"></category>
                  <order></order>
                  <schedule class="flex-1"></schedule>
                </fly-box>
              </div>
              <div class="flex-1 ml-2 text" style="height: 1690px">
                <fly-box>
                  <plan-list></plan-list>
                  <sales-ranking class="flex-1"></sales-ranking>
                </fly-box>
              </div>
            </div>
          </div>
        </div>
      </div>
    </scale-container>
  </div>
</template>

<script>
import { ref } from 'vue';
import FlyBox from '@/components/FlyBox';
import ScaleContainer from '@/components/ScaleContainer';
import Loading from '@/components/Loading';
import TopHeader from '@/components/TopHeader';
import UserTotal from '@/components/UserTotal';
import AgeDistribution from '@/components/AgeDistribution';
import DeviceCount from '@/components/DeviceCount';
import TotalGender from '@/components/TotalGender';
import LineChart from '@/components/LineChart';
import BarChart from '@/components/BarChart';
import CenterHeader from '@/components/CenterHeader';
import Category from '@/components/Category';
import Earth from '@/components/Earth';
import Order from '@/components/Order';
import Schedule from '@/components/Schedule';
import SalesRanking from '@/components/SalesRanking';
import PlanList from '@/components/PlanList';

export default {
	name : 'Home',
	components : {
		ScaleContainer,
		Loading,
		TopHeader,
		UserTotal,
		AgeDistribution,
		DeviceCount,
		TotalGender,
		LineChart,
		BarChart,
		FlyBox,
		CenterHeader,
		Category,
		Earth,
		Order,
		Schedule,
		PlanList,
		SalesRanking,
	},
	setup () {
		let visible = ref(false);
		return {
			visible,
		};
	},
};
</script>
<style lang="scss" scoped>
.left {
  width: 860px;
  margin-right: 20px;
}
.ml-2 {
  margin-left: 20px;
}
</style>
